<!DOCTYPE html>
<html>
	<head>
		<title>HTML5 - What is it &amp; why is it important</title>
		<!-- CSS make older non IE pre html5 browsers handle new elements ok --> 
	    <style> 
	      article, aside, dialog, figure, footer, header, hgroup, menu, nav,
	      section {
	          display: block;
	      }
	    </style> 
	    <link rel="stylesheet" type="text/css" href="presentation.css" />  
	    <style> 
	      body {
	        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	      }
	      code, pre {
	        font-family: "Andale Mono", Monaco, "Consolas", "Lucida Console",
	                     Courier, "Courier New", monospace;
	      }
	      ul {
	        list-style-position: inside;
	      }
	    </style> 
		<link href="shCore.css" rel="stylesheet" type="text/css" />
		<link type="text/css" rel="Stylesheet" href="shThemeDjango.css"/>
		
		<!-- Force ie to recognise new html5 elements -->
	    <!--[if lt IE 9]>
	        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	    <![endif]--> 
	    <script type="text/javascript" src="jquery-1.3.2.min.js"></script> 
		<script type="text/javascript" src="jquery-ui-1.7.3.min.js"></script>
		<script type="text/javascript" src="modernizr-1.5.min.js"></script> 
	    <script type="text/javascript" src="presentation.js"></script>
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript" src="shCore.js"></script>
		<script type="text/javascript" src="shBrushJScript.js"></script>
		<script type="text/javascript" src="shBrushPlain.js"></script>
		<script type="text/javascript" src="shBrushXml.js"></script>
		<script type="text/javascript" src="shBrushCss.js"></script>
		
	</head>
	<body>
		<article class="slides">
			<header>
				<hgroup>
					<h1>HTML5 - What &amp; Why</h1>
					<nav>
						<ul>
							<li><button id="previous-slide">Prev</button></li>
							<li><button id="next-slide">Next</button></li>
						</ul>
					</nav>
				</hgroup>
			</header>
			<section id="title">
				<hgroup>
					<h1>
						<a href="." rel="bookmark">HTML5</a>
					</h1>
					<h2>What is it &amp; why is it important</h2>
				</hgroup>
			</section>
			<section id="what-is-html5">
				<h2>What is HTML5?</h2>
				<p>The Perception:</p>
				<ul>
					<li>Flash Killer</li>
					<li>Offline Web Apps</li>
					<li>Cool Presentation Effects</li>
					<li>Fast Javascript</li>
				</ul>
				<p>The Truth: it's the next w3c web markup spec</p>
			</section>
			
			<section id="what-is-the-talk-about">
				<h2>What is the talk about?</h2>
				<p>The Perception is Reality</p>
				<p>When we combine:</p>
				<p>HTML5 + Javascript API's + CSS3</p>
			</section>
			<section id="html5-markup-changes-1">
				<h2>HTML5 Markup Changes</h2>
				
				<p>Pre HTML5 - 15 doctypes that trigger "standards mode". Like:</p>
				<pre class="brush: xml">&lt;!DOCTYPE html
 PUBLIC "-//W3C//DTD XMTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11-strict.dtd"&gt;</pre>
				<p>With HTML5 "simple" DOCTYPE</p>
				<pre class="brush: xml">&lt;!DOCTYPE html &gt;</pre>
			</section>
			
			<section id="html5-markup-changes-2">
				<h2>HTML5 Markup Changes</h2>
				<p>New Semantic Elements</p>
				<p>&lt;section&gt;
				&lt;nav&gt;
				&lt;article&gt;
				&lt;aside&gt;
				&lt;hgroup&gt;
				&lt;header&gt;
				&lt;footer&gt;
				&lt;time&gt;
				&lt;mark&gt;</p>
				
				<p>Easy to add support for elements in non html5 browser</p>
				<pre class="brush: js">
				<!-- css to make older non IE pre html5 browsers handle new elements ok --> 
				<style> 
					  article, aside, dialog, figure, footer, header, hgroup, menu, nav,
					  section {
					      display: block;
					  }</style>
				<!-- Force ie to recognise new html5 elements -->
				<!--[if lt IE 9]>
				    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
				<![endif]-->
				</pre>
				
			</section>
			
			<section id="form-enhancements">
				<h2>Form Enhancements</h2>
				        <pre>
&lt;input type='<b>range</b>' min='0' max='50' value='0' /&gt; 
<input type='range' min='0' max='50' value='0' />
&lt;input results='10' type='<b>search</b>' /&gt; 
<input results="10" type='search' />
&lt;input type='text' <b>placeholder</b>='Search inside' /&gt; 
<input type='text' placeholder='Search inside' />
&lt;style> :invalid { background-color: red; } &lt;/style>
&lt;input type='<b>color</b>' /&gt; 
<input type='color' size="30" placeholder='Type a valid color here to validate' />
&lt;input type='<b>number</b>' /&gt; 
<input type='number' value="abc" />
&lt;input type='<b>email</b>' /&gt; 
<input type='email' value="some@email.com" />
&lt;input type='<b>tel</b>' /&gt; 
<input type='tel' value="1234" />
etc...
						</pre>
			</section>
				
			<section id="editable-content">
				<h2>Editable Content</h2>
				<p>Any elements with the contenteditable attribute set will have a grey outline as you hover over.</p>
				
				<h2>To Do List</h2>
					<ul id="edit" contenteditable="true" style="list-style-type:square">
						<li></li>
					</ul>
			</section>

			<section id="audio" h5:feature="audio">
				<h2>Audio</h2>
				<p>native audio support</p>
				<p>codec's: ogg, oga, mp3, wav, AAC</p>
				<audio controls>
					<source src="http://ccmixter.org/content/BillRayDrums/BillRayDrums_-_Funky_BC_Drums.mp3" />
				</audio>
				<p><a href="http://ccmixter.org/files/BillRayDrums/25868">"Funky BC Drums"</a> by BillRayDrums 2010 - Licensed under Creative Commons Attribution Noncommercial (3.0)</p>
				<pre class="brush: js">
				<audio id="a_clip" controls>
					<source src="BillRayDrums_-_Funky_BC_Drums.mp3" />
					<source src="BillRayDrums_-_Funky_BC_Drums.ogg" />
				</audio>
				var a_clip = document.querySelector('#a_clip');
				a_clip.muted=false;
				</pre>
				
			</section>
		
			<section id="video" h5:feature="video">
				<h2>Video</h2>
				<p>native video support</p>
				<p>codec's: ogv, H.264 mp4, vp8</p>
				<video width="320" height="240" preload="none" poster="videoframe.jpg" controls> 
					<source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg" />  
				</video>
				<pre class="brush: js">
				&lt;video width="320" height="240" preload="none" poster="videoframe.jpg" controls&gt; 
					&lt;source src="http://mirror.cessen.com/blender.org/peach/trailer/trailer_400p.ogg" type="video/ogg" /&gt;  
				&lt;/video&gt;
				</pre>
			</section>
			
			<section id="canvas" h5:feature="canvas">
				<h2>2D Drawing Canvas</h2>
				<canvas id="demo-canvas" width="300" height="200"></canvas>
				<pre class="brush: js">
				<script>
					var canvas = document.getElementById("demo-canvas");
					var ctx = canvas.getContext("2d");
					var gradient = ctx.createLinearGradient(0, 0, 300, 0);
					gradient.addColorStop(0, "blue");
					gradient.addColorStop(1, "white");
					ctx.fillStyle = gradient;
					ctx.fillRect(0, 0, 300, 200);
					ctx.font = "bold 20px sans-serif";
					ctx.fillStyle = "lime";
					ctx.fillText("HTML5 Rules", 20, 80);
				</script>
				</pre>	
			</section>
			
			<section id="svg" h5:feature="svg">
				<h2>SVG</h2>
				<!-- based on example in html5rocks.com -->
				<pre class="brush: xml">
				&lt;svg&gt;
				&lt;circle id="aCircle" class="important" cx="50%" cy="50%" r="100"
				onmousedown="alert('you clicked on a circle');"/&gt;
				&lt;/svg&gt;
				</pre>
				<div id="svg-demo"></div>
				<p>Not all browsers support inline SVG, but javascript created SVG will work in most HTML5 browsers</p>
				<script>
				window.addEventListener('DOMContentLoaded', function() {
				var container = document.getElementById('svg-demo');
				var svgns = 'http://www.w3.org/2000/svg';
				var svg = document.createElementNS(svgns, 'svg');
				svg.setAttribute('width', '100px');
				svg.setAttribute('height', '100px');
				var circle = document.createElementNS(svgns, 'circle');
				circle.setAttribute('cx', '50%');
				circle.setAttribute('cy', '50%');
				circle.setAttribute('r', 48);
				circle.setAttribute('fill','blue');
				circle.addEventListener('mousedown', function() {
				alert('you clicked on a circle');
				}, false);
				svg.appendChild(circle);
				container.appendChild(svg);
				}, false);
				</script>
				<pre class="brush: js">
				&lt;script&gt;
					var container = document.getElementById('svg-demo');
					var svgns = 'http://www.w3.org/2000/svg';
					var svg = document.createElementNS(svgns, 'svg');
					svg.setAttribute('width', '100px');svg.setAttribute('height', '100px');
					var circle = document.createElementNS(svgns, 'circle');
					circle.setAttribute('r', 48);circle.setAttribute('fill','blue');
					circle.setAttribute('cx', '50%');circle.setAttribute('cy', '50%');
					svg.appendChild(circle);container.appendChild(svg);
				&lt;/script&gt;	
				</pre>
			</section>
			
			<section id="svg-2" h5:feature="svg">
				<h2>SVG</h2>
				<p>Or you can use a javascript library like <a href="http://raphaeljs.com/australia.html" target="svg-demo">http://raphaeljs.com/</a> to make SVG content creation easier</p>
			</section>

			<section id="webgl" >
				<h2>WebGL 3D Canvas</h2>
				<p>WebGL is based on OpenGL ES 2.0 and provides a programmatic interface for 3D graphics. It uses the HTML5 canvas element and is accessed using DOM interfaces.</p>
				<a href="http://www.khronos.org/webgl/">http://www.khronos.org/webgl/</a>
			</section>
			
			<section id="microdata" >
				<h2>Microdata</h2>
				<pre class='brush: xml'>
					<li class="experience vevent vcard"> <a href="#name" class="include"></a> 
						<h3 class="title">CTO</h3> 
					      <h4 class="org summary"><a href="http://www.linkedin.com/companies/century-software?trk=ppro_cprof&amp;lnk=vw_cprofile" >Century Software (M) Sdn. Bhd.</a></h4> 
						<p class="organization-details">(Computer Software industry)</p> 
						<p class="period"> 
							<abbr class="dtstart" title="2008-01-01">January 2008</abbr> 
					 		&mdash; <abbr class="dtstamp" title="2010-06-29">Present</abbr>        
							<abbr class="duration" title="P2Y6M">(2 years 6 months)</abbr> 
						</p> 
					</li>
				</pre>
				<a href="http://www.google.com/webmasters/tools/richsnippets?url=http://au.linkedin.com/in/markjrees&view=" target="mjr-microdata">What can we find out about me?</a>
			</section>	
			
			<section id="selectors" >
				<h2>Selectors</h2>
				<p>New DOM Element Selector</p>
				<pre class="brush: js">
					var secs = document.getElementsByClassName('section');
				</pre>
				<p>New CSS Selectors</p>
				<pre class="brush: js">
					var els = document.querySelectorAll("ul li:nth-child(odd)");
					var els = document.querySelectorAll("table.test > tr > td");
				</pre>				
			</section>
								
			<section id="geolocation" h5:feature="geolocation">
				<h2>Geolocation</h2>
				<p>navigator.geolocation.getCurrentPosition()</p>
				<button id="see_position">Where am I?</button>
				<button id="see_position_code" style="display: none">Show code?</button>
				<div id="map_canvas" style="position: relative; width: 600px; height: 200px"></div>
				<div id="geocode" style="display:none">
				<pre class="brush: js">
					&lt;script&gt;
						document.getElementById('see_position').addEventListener('click', function() {
							if (navigator.geolocation) {
								navigator.geolocation.getCurrentPosition(showPosition);
								// also monitor position as it changes
								navigator.geolocation.watchPosition(showPosition);
								} else {
									alert("no geolocation support");
								}
								function showPosition(position) {
									var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
									...
								}
	 						}, false);
					&lt;/script&gt;
				</pre>
				</div>
				<script>
					document.getElementById('see_position_code').addEventListener('click', function() { 
						$("#map_canvas").hide();
						$("#see_position_code").hide()
						$("#geocode").show();
						$("#see_position").show();
					}, false);
					document.getElementById('see_position').addEventListener('click', function() {
						if (navigator.geolocation) {
							navigator.geolocation.getCurrentPosition(showPosition);
							// also monitor position as it changes
							navigator.geolocation.watchPosition(showPosition);
							$('#map_canvas').show();
							$("#see_position").hide();
							$('#geocode').hide();
							$("#see_position_code").show();
							} else {
								alert("no geolocation support");
							}
							function showPosition(position) {
								var latlng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
								var mapopts = {
									zoom: 14,
									center: latlng,
									mapTypeId: google.maps.MapTypeId.ROADMAP
								};
								var map = new google.maps.Map(document.getElementById("map_canvas"), mapopts);
								var marker = new google.maps.Marker({
									position: latlng,
									map: map
									});
							}
 						}, false);
				</script>
			</section>

			<section id="offline">
				<h2>Offline (Application Cache API)</h2>
				<pre class="brush: js">
					&lt;html manifest="html5-demo.manifest"&gt;
					window.applicationCache.addEventListener('checking', updateCacheStatus, false);
				</pre>
				<pre class="brush: plain">
					CACHE MANIFEST

					# version 0001

					CACHE:
					/mosc2010/jquery-1.3.2.min.js
					/mosc2010/presentation.css
					/mosc2010/background.png
				</pre>
			</section>
						
			<section id="local-storage">
				<h2>Local Storage</h2>
				<p>Web Storage specifies two ways to do "local" persistent data.</p>
				<p>sessionStorage is used to save data during lifetime of open tab or window</p>
				<p>localStorage is used to store data for longer periods, and survives browser close</p>
				<p>Save text value on the client side (crash-safe)</p>
				<textarea id="ta"></textarea>
				<button id="save_ta">Save</button>
				<pre class="brush: js">
				<script type="text/javascript" >
				var area = document.getElementById('ta');
				if (!area.value) {
				area.value = window.localStorage.getItem('entry');
				}
				document.getElementById('save_ta').addEventListener('click', function () {
				window.localStorage.setItem('entry', area.value);
				window.localStorage.setItem('timestamp', (new Date()).getTime());
				}, false);
				</script>
				</pre>
			</section>
			
			<section id="web-storage">
				<h2>Web SQL/IndexedDB</h2>
				<pre class="brush: js">
					var db = window.openDatabase("MyDb", "1.0");
					db.transaction(function(tx) {
					  tx.executeSql("SELECT * FROM my_table", [], successCallback, errorCallback);
					})
				</pre>
			</section>
			
			<section id="other-js-apis">
				<h2>Other JS API's</h2>
				<ul>
					<li>X-Domain Communication</li>
					<li>Notifications</li>
					<li>Web Sockets</li>
					<li>Web Workers</li>
				</ul>
			</section>
			
			<section id="css">
				<h2>CSS</h2>
				<ul>
					<li>Columns</li>
					<li>Rounded Corners</li>
					<li>Web Fonts</li>
					<li>Text Wrapping &amp; Stroke</li>
					<li>Gradients</li>
					<li>Transistions &amp; 2D Transforms</li>
					<li>Animations</li>
				</ul>
			</section>
			
			<section id="detecting-features">
				<h2>Detecting HTML5 Support</h2>
				<p>Modernizr (<a href="http://www.modernizr.com/">http://www.modernizr.com/</a>) is an open source JavaScript library that detects the availability of native implementations of many HTML5 & CSS3 features</p>
				<pre class="brush: xml">
					&lt;!DOCTYPE html&gt;
					&lt;html&gt;
					&lt;head&gt;
					  &lt;script src="modernizr.min.js">&lt;/script&gt;
					&lt;/head&gt;
					&lt;body&gt;
					  &lt;script&gt;if (Modernizr.canvas) { doSomething();}&lt;/script&gt;
					&lt;/body&gt;
					&lt;/html&gt;
				</pre>
			</section>
			
			<section id="when-can-i-use-it">
				<h2>What Browser Supports What</h2>
				<p><a href="http://html5readiness.com/" target="html5readiness">http://html5readiness.com/</a></p>
				<p><a href="http://caniuse.com/" target="html5readiness">http://caniuse.com/</a></p>
				<p><a href="http://html5test.com/" target="html5readiness">http://html5test.com/</a></p>
			</section>
			
			<section id="what-why-summary">
				<h2>Summary</h2>
				<h3>what is HTML5</h3>
				<p>html5 + css3 + javascript api's</p>
				<h3>Why</h3>
				<p>much easier to build web applications not just web sites</p>
				<p>cross browser support</p>
			</section>
			
			<section id="resources">
				<h2>Resources</h2>
				<p><a href="http://hex-dump.appspot.com/mosc2010/html5.html">Latest version of this presentation (http://hex-dump.appspot.com/mosc2010/html5.html)</a></p>
				<p><a href="http://diveintohtml5.org/">Dive into HTML5 by Mark Pilgrim (http://diveintohtml5.org/)</a></p>
				<p><a href="http://html5rocks.com/">Google Developer Resources for HTML5(http://html5rocks.com/)</a></p>
			</section>
			
			<section id="questions">
				<h2>Questions?</h2>
			</section>
			
			<footer>
				<div id="browsersupport" style="display:none">Your browser supports this feature</div>
				<div id="nobrowsersupport" style="display:none">Your browser does not support this feature</div>
				<address class="vcard">
					<a href="http://hex-dump.blogspot.com/" class="url fn">Mark Rees</a>, 
					<a href="http://www.centurysoftware.com.my/">Century Software</a>
				</address>
				<p>MOSC, Kulua Lumpur, 30 June 2010</p>
			</footer>
		</article>
		<script type="text/javascript">
		     SyntaxHighlighter.all()
		</script>
	</body>
</html>